{% extends "../_base/layout.html" %} 
{% block css %}
<link rel="stylesheet" href="{{site.static}}/css/personal_record.css"> 
{% endblock %}
{% block js %}
<script src="{{site.static}}/js/personal/record.js"></script>
{% endblock %}

{% block content %} 
    {% block header%}
    {% set pageHeaderConf = {pageTitle:__("record_page_title"),level:2} %} 
    {% include "../_base/page_header.html" %} 
    {% endblock %}
<div class="eui-main-container eui--padding-b-0 record-main-container">
    {% block banner%}
    {% include "../common/page_banner.html" %} 
    {% endblock %} 
     <ul class="eui-bar-tab eui--clearfix">
        <li class="eui-tab-item eui--position-rel active">
            {{__("record_nav_point_record")}}
        </li>
        <li class="eui-tab-item eui--position-rel">
            {{__("record_nav_pack_record")}}
        </li>
        <li class="eui-tab-item eui--position-rel">
            {{__("record_nav_game_record")}}
        </li>
    </ul>
    <div class="content integral-record-content">
        <ul class="eui-table-view">
            <li class="eui-table-view-cell eui-table-view-cell-border-circle">
                <h2 class="eui-media-body eui--position-rel">签到</h2>   
                <div class="eui-media-footer">  
                    <p class="record-scroe eui--success-color">-108</p>
                    <p class="eui--959494-color">2017-08-10</p>
                </div>
            </li>
            <li class="eui-table-view-cell eui-table-view-cell-border-circle">
                <h2 class="eui-media-body eui--position-rel">签到</h2>   
                <div class="eui-media-footer">  
                    <p class="record-scroe eui--eb160b-color">+8</p>
                    <p class="eui--959494-color">2017-08-10</p>
                </div>
            </li>
            <li class="eui-table-view-cell eui-table-view-cell-border-circle">
                <h2 class="eui-media-body eui--position-rel">签到</h2>   
                <div class="eui-media-footer">  
                    <p class="record-scroe eui--eb160b-color">+8</p>
                    <p class="eui--959494-color">2017-08-10</p>
                </div>
            </li>
            <li class="eui-table-view-cell eui-table-view-cell-border-circle">
                <h2 class="eui-media-body eui--position-rel">签到</h2>   
                <div class="eui-media-footer">  
                    <p class="record-scroe eui--eb160b-color">+8</p>
                    <p class="eui--959494-color">2017-08-10</p>
                </div>
            </li>
        </ul> 
    </div>
    <div class="content gift-record-content eui--white-bacg" style="display:none">
        <ul class="eui-table-view">
            <li class="eui-table-view-cell eui-table-view-cell-border-circle eui--font-26">
                <div class="eui-media eui--clearfix">
                    <img class="eui--media-img eui--pull-left" src="{{site.cdn}}/test-game-icon.png" alt="">
                    <div class="eui-media-body eui--pull-left">
                        <p class="eui--black-color">礼包名称，不超过20个字符</p>
                        <p class="eui--e51c24-color">有效期： <span>2017-08-17~2018-08-18</span></p>  
                        <p class="eui--949494-color eui--font-24">领取时间： <span>2017-08-17~2018-08-18</span></p>
                    </div>
                </div>
                <div class="eui--949494-color">
                    <p class="sequence-num-wrap eui--margin-b-10">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                    <p class="sequence-num-wrap">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                </div>
            </li>
            <li class="eui-table-view-cell eui-table-view-cell-border-circle eui--font-26">
                <div class="eui-media eui--clearfix">
                    <img class="eui--media-img eui--pull-left" src="{{site.cdn}}/test-game-icon.png" alt="">
                    <div class="eui-media-body eui--pull-left">
                        <p class="eui--black-color">礼包名称，不超过20个字符</p>
                        <p class="eui--e51c24-color">有效期： <span>2017-08-17~2018-08-18</span></p>  
                        <p class="eui--949494-color eui--font-24">领取时间： <span>2017-08-17~2018-08-18</span></p>
                    </div>
                </div>
                <div class="eui--949494-color">
                    <p class="sequence-num-wrap eui--margin-b-10">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                    <p class="sequence-num-wrap">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                </div>
            </li>
            <li class="eui-table-view-cell eui-table-view-cell-border-circle eui--font-26">
                <div class="eui-media eui--clearfix">
                    <img class="eui--media-img eui--pull-left" src="{{site.cdn}}/test-game-icon.png" alt="">
                    <div class="eui-media-body eui--pull-left">
                        <p class="eui--black-color">礼包名称，不超过20个字符</p>
                        <p class="eui--e51c24-color">有效期： <span>2017-08-17~2018-08-18</span></p>  
                        <p class="eui--949494-color eui--font-24">领取时间： <span>2017-08-17~2018-08-18</span></p>
                    </div>
                </div>
                <div class="eui--949494-color">
                    <p class="sequence-num-wrap eui--margin-b-10">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                    <p class="sequence-num-wrap">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                </div>
            </li>
        </ul> 
    </div>
    <div class="content gift-record-content eui--white-bacg" style="display:none">
        <ul class="eui-table-view">
            <li class="eui-table-view-cell eui-table-view-cell-border-circle eui--font-26">
                <div class="eui-media eui--clearfix">
                    <img class="eui--media-img eui--pull-left" src="{{site.cdn}}/test-game-icon.png" alt="">
                    <div class="eui-media-body eui--pull-left">
                        <p class="eui--black-color">礼包名称，不超过20个字符</p>
                        <p class="eui--e51c24-color">有效期： <span>2017-08-17~2018-08-18</span></p>  
                        <p class="eui--949494-color eui--font-24">领取时间： <span>2017-08-17~2018-08-18</span></p>
                    </div>
                </div>
                <div class="eui--949494-color">
                    <p class="sequence-num-wrap eui--margin-b-10">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                    <p class="sequence-num-wrap">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                </div>
            </li>
            <li class="eui-table-view-cell eui-table-view-cell-border-circle eui--font-26">
                <div class="eui-media eui--clearfix">
                    <img class="eui--media-img eui--pull-left" src="{{site.cdn}}/test-game-icon.png" alt="">
                    <div class="eui-media-body eui--pull-left">
                        <p class="eui--black-color">礼包名称，不超过20个字符</p>
                        <p class="eui--e51c24-color">有效期： <span>2017-08-17~2018-08-18</span></p>  
                        <p class="eui--949494-color eui--font-24">领取时间： <span>2017-08-17~2018-08-18</span></p>
                    </div>
                </div>
                <div class="eui--949494-color">
                    <p class="sequence-num-wrap eui--margin-b-10">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                    <p class="sequence-num-wrap">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                </div>
            </li>
            <li class="eui-table-view-cell eui-table-view-cell-border-circle eui--font-26">
                <div class="eui-media eui--clearfix">
                    <img class="eui--media-img eui--pull-left" src="{{site.cdn}}/test-game-icon.png" alt="">
                    <div class="eui-media-body eui--pull-left">
                        <p class="eui--black-color">礼包名称，不超过20个字符</p>
                        <p class="eui--e51c24-color">有效期： <span>2017-08-17~2018-08-18</span></p>  
                        <p class="eui--949494-color eui--font-24">领取时间： <span>2017-08-17~2018-08-18</span></p>
                    </div>
                </div>
                <div class="eui--949494-color">
                    <p class="sequence-num-wrap eui--margin-b-10">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                    <p class="sequence-num-wrap">
                        <span class="sequence-title">序列号</span>
                        <span class="sequence-num eui--display-i-b">ABCDEFGHIJKLMNOPQRSTUVXYZ</span>
                        <a href="javascript:;" class="copt-btn eui--pull-right eui--warning-color">复制</a>
                    </p>
                </div>
            </li>
        </ul> 
    </div>
    <p class="check-tips eui--text-center eui--font-24">{{__("record_check_tips")}}</p>    
</div>
{% endblock %}